﻿<!DOCTYPE html>
<html lang="en">

<head>
    <link href="~/element-plus/dist/index.css" rel="stylesheet" />
    <link href="~/css/table.css" rel="stylesheet" />
    <script src="~/vue/dist/vue.global.js"></script>
    <script src="~/element-plus/dist/index.full.js"></script>
    <script src="~/axios/dist/axios.js"></script>
</head>

<body>
    <div id="app">
        <table width="100%">
            <tr>
                <td colspan="2" style="text-align: left">
                    <font color="black">
                        您正在做的业务是：人力资源--薪酬标准管理--薪酬发放登记
                    </font>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: right;">
                    <el-button v-on:click="edit()">提交</el-button>
                    <el-button v-on:click="close()">返回</el-button>
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: left">
                    薪酬单编号：{{randomNumber}}
                    <input type="hidden" name="salaryGrant.salaryGrantId" value="HS1353753198460">
                </td>
            </tr>
            <tr>
                <td colspan="2" style="text-align: left">
                    机构：@ViewBag.kindName
                </td>
            </tr>
            <tr>
                <td style="text-align: left">
                    本机构总人数:{{count}}
                    <input type="hidden" name="salaryGrant.humanAmount" value="5">
                    ，基本薪酬总数:{{salary}}
                    ，实发总额:{{pSalary}}

                </td>
                <td style="text-align: right;">
                    登记人：<input type="text" name="salaryGrant.register" v-model="tName" size="8" readonly="readonly">
                    登记时间：<span id="Tdate"></span>
                    <input v-model="tTime">
                </td>
            </tr>
        </table>
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" :index="indexMethod" label="序号" width="50"></el-table-column>
            <el-table-column prop="humanId" label="档案编号"></el-table-column>
            <el-table-column prop="humanName" label="姓名"></el-table-column>
            <el-table-column label="薪酬基本明细">
                <template #default="scope">
                    <span style="color:blue" class="btn" v-on:click="info(scope.row)">详细金额</span>
                </template>
            </el-table-column>
            <el-table-column label="奖励金额">
                <template #default="scope">
                    <el-input v-model.number="scope.row.reward" placeholder="奖励金额" v-on:input="handleInput(scope.row, 'reward')" />
                </template>
            </el-table-column>
            <el-table-column label="销售绩效总额">
                <template #default="scope">
                    <el-input v-model.number="scope.row.performance" placeholder="销售绩效总额" v-on:input="handleInput(scope.row, 'performance')" />
                </template>
            </el-table-column>
            <el-table-column label="应扣金额">
                <template #default="scope">
                    <el-input v-model.number="scope.row.deductible" placeholder="应扣金额" v-on:input="handleInput(scope.row, 'deductible')" />
                </template>
            </el-table-column>
            <el-table-column label="实发金额">
                <template #default="scope">
                    <el-input v-model="scope.row.paidSalarySum" placeholder="实发金额" readonly />
                </template>
            </el-table-column>
        </el-table>

        <el-dialog v-model="dialogVisible"
                   title=""
                   width="500"
                   :before-close="handleClose">
            <table border="1">
                <tbody v-for="item in ssd">
                    <tr>
                        <td width="250px" style="background-color:white;border: 1px solid black;">{{item.itemName}}</td>
                        <td width="250px" style="background-color:white;border: 1px solid black;">{{item.salary}}</td>
                    </tr>
                </tbody>
            </table>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" v-on:click="reset()">
                        返回
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-model="dialogVisible1"
                   title=""
                   width="500"
                   :before-close="handleClose">
            <span>薪酬发放信息登记成功！</span>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" v-on:click="close1()">
                        返回
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</body>
</html>
<style>
    tbody,
    td,
    tfoot,
    th,
    thead,
    tr {
        border-color: inherit;
        background-color: #ffffbb;
        border-style: solid;
        border-width: 0;
    }
</style>
<script>
    window.userTrueName = '@ViewBag.UserTrueName'; // 将ViewBag的值赋给全局变量，方便Vue实例获取
    window.num = '@ViewBag.num'; // 将ViewBag的值赋给全局变量，方便Vue实例获取
    const { createApp, ref, reactive, watchEffect } = Vue;
    const { ElMessage } = ElementPlus;
    var app = createApp({
        setup() {
            const tableData = ref([]);
            const indexMethod = (index) => {
                return index + 1;
            };
            const tName = ref(""); // 登记人
            const tTime = ref(""); // 登记时间
            const salary = ref(0); // 基本薪酬总额
            const pSalary = ref(0); // 实发总额
            const count = ref(0); // 总人数
            const randomNumber = ref("")//薪酬发放编号
            const dialogVisible = ref(false)
            const ssd = ref([])
            const salaryStandardId = ref("")//薪酬标准单号
            const firstKindId = ref(null)//一级机构编号
            const firstKindName = ref(null)//一级机构名称
            const secondKindId = ref(null)//二级机构编号
            const secondKindName = ref(null)//二级机构名称
            const thirdKindId = ref(null)//三级机构编号
            const thirdKindName = ref(null)//三级机构名称
            const salaryStandardSum = ref()//标准薪酬总额
            const dialogVisible1 = ref(false)

            // 填充数据的函数
            function fill() {
                axios.get("/SG/HFByKindId").then(res => {
                    tableData.value = res.data.map(item => {
                        return {
                           ...item,
                            reward: 0,  // 初始化每行的奖励金额为0
                            performance: 0,  // 初始化每行的销售绩效总额为0
                            deductible: 0,  // 初始化每行的应扣金额为0
                            paidSalarySum: item.salarySum  // 初始化每行的实发金额为0
                        };
                    });
                    console.info(tableData.value)
                    tName.value = window.userTrueName;
                    const num = window.num
                    for (var i = 0; i < tableData.value.length; i++) {
                        salary.value += tableData.value[i].salarySum;
                        pSalary.value += tableData.value[i].paidSalarySum;
                        salaryStandardId.value = tableData.value[i].salaryStandardId
                        if (num == 1){
                            firstKindId.value = tableData.value[i].firstKindId
                            firstKindName.value = tableData.value[i].firstKindName
                        }else if (num == 2){
                            firstKindId.value = tableData.value[i].firstKindId
                            firstKindName.value = tableData.value[i].firstKindName
                            secondKindId.value = tableData.value[i].secondKindId
                            secondKindName.value = tableData.value[i].secondKindName
                        }else if (num == 3){
                            firstKindId.value = tableData.value[i].firstKindId
                            firstKindName.value = tableData.value[i].firstKindName
                            secondKindId.value = tableData.value[i].secondKindId
                            secondKindName.value = tableData.value[i].secondKindName
                            thirdKindId.value = tableData.value[i].thirdKindId
                            thirdKindName.value = tableData.value[i].thirdKindName
                        }
                        salaryStandardSum.value = tableData.value[i].salarySum
                    }
                    count.value = tableData.value.length;
                    const prefix = 'HS';
                    let randomDigits = '';
                    for (let i = 0; i < 12; i++) {
                    randomDigits += Math.floor(Math.random() * 10); // 生成0-9的随机数字字符
                    }
                    randomNumber.value = prefix + randomDigits;
                }).catch(Error => {
                    console.info(Error);
                });
            }
            fill();

            // 初始化一个变量来存储定时器的ID
            let intervalId;

            // 开始定时器，每一秒更新时间
            function startUpdatingTime() {
                // 清除已存在的定时器，防止多次启动
                clearInterval(intervalId);

                // 设置定时器，每一秒执行一次updateTime函数
                intervalId = setInterval(updateTime, 1000);
            }

            // 更新时间的函数
            function updateTime() {
                // 更新登记时间
                tTime.value = new Date().toLocaleString();
            }

            // 启动定时器
            startUpdatingTime();

            // 计算每行实发金额的函数
            const calculateRowPaidSalarySum = (row) => {
                return row.salarySum + row.reward + row.performance - row.deductible;
            };

            // 使用watch监听每行输入框绑定值的变化，变化时更新该行实发金额并强制更新视图
            const watchRowInputChanges = (row) => {
                watchEffect(() => {
                    row.paidSalarySum = calculateRowPaidSalarySum(row);
                    updateTotalPaidSalary();
                });
            };

            // 更新实发总额的函数
            const updateTotalPaidSalary = () => {
                pSalary.value = tableData.value.reduce((acc, row) => acc + row.paidSalarySum, 0);
            };

            // 处理输入框输入的函数，更新对应行的输入值并触发重新计算该行实发金额
            const handleInput = (row, type) => {
                if (type === 'reward') {
                    // 确保是数字类型，可添加更多校验逻辑，比如限制范围等
                    row.reward = Number(row.reward);
                } else if (type === 'performance') {
                    row.performance = Number(row.performance);
                } else if (type === 'deductible') {
                    row.deductible = Number(row.deductible);
                }
                watchRowInputChanges(row);
            };

            // 对每一行数据都添加监听，初始化时触发一次计算
            tableData.value.forEach(row => {
                watchRowInputChanges(row);
            });

            function info(row){
                dialogVisible.value = true
                axios.get("/SG/SSDSelectBySid",{
                    params:{
                        sid:row.salaryStandardId
                    }
                }).then(res =>{
                    ssd.value = res.data
                }).catch(Error =>{
                    console.info(Error)
                })
            }

            function reset(){
                dialogVisible.value = false
            }

            function close(){
                window.location.href = "/SG/SGJGSelect?num="+window.num
            }

            function close1(){
                // window.location.href = "/SG/Index"
                window.location.href = "/SG/SGJGSelect?num="+window.num
            }

            function edit(){
                const infolist = tableData.value.map(item => ({salaryGrantId : randomNumber.value,humanId:item.humanId,humanName:item.humanName,
                bounsSum:item.reward,saleSum:item.performance,deductSum:item.deductible,salaryStandardSum:item.salarySum,SalaryPaidSum:item.paidSalarySum}))
                //使用一个新的集合保存实发金额和应发金额
                const num = tableData.value.map(item => ({
                    hufId: item.hufId,
                    demandSalaraySum: item.paidSalarySum,
                    paidSalarySum: item.paidSalarySum,
                    attachmentName: item.attachmentName,
                    bonusAmount: item.bonusAmount,
                    changeTime: item.changeTime,
                    changer: item.changer,
                    checkStatus: item.checkStatus,
                    checkTime: item.checkTime,
                    checker: item.checker, // 修正此处逗号为冒号
                    deleteTime: item.deleteTime,
                    fileChangAmount: item.fileChangAmount,
                    firstKindId: item.firstKindId,
                    firstKindName: item.firstKindName,
                    humanAccount: item.humanAccount,
                    humanAddress: item.humanAddress,
                    humanAge: item.humanAge,
                    humanBank: item.humanBank,
                    humanBirthday: item.humanBirthday,
                    humanBirthplace: item.humanBirthplace,
                    humanEducatedDegree: item.humanEducatedDegree,
                    humanEducatedMajor: item.humanEducatedMajor,
                    humanEducatedYears: item.humanEducatedYears,
                    humanEmail: item.humanEmail,
                    humanFamilyMembership: item.humanFamilyMembership,
                    humanFileStatus: item.humanFileStatus,
                    humanHistroyRecords: item.humanHistroyRecords,
                    humanHobby: item.humanHobby,
                    humanId: item.humanId,
                    humanIdCard: item.humanIdCard,
                    humanMajorId: item.humanMajorId,
                    humanMajorKindId: item.humanMajorKindId,
                    humanMajorKindName: item.humanMajorKindName,
                    humanMajorName: item.humanMajorName,
                    humanMobilephone: item.humanMobilephone,
                    humanName: item.humanName,
                    humanNationality: item.humanNationality,
                    humanParty: item.humanParty,
                    humanPicture: item.humanPicture,
                    humanPostcode: item.humanPostcode,
                    humanProDesignation: item.humanProDesignation,
                    humanQQ: item.humanQQ,
                    humanRace: item.humanRace,
                    humanReligion: item.humanReligion,
                    humanSex: item.humanSex,
                    humanSocietySecurityId: item.humanSocietySecurityId,
                    humanSpeciality: item.humanSpeciality,
                    humanTelephone: item.humanTelephone,
                    lastlyChangeTime: item.lastlyChangeTime,
                    majorChangeAmount: item.majorChangeAmount,
                    recoveryTime: item.recoveryTime,
                    registTime: item.registTime,
                    register: item.register,
                    remark: item.remark,
                    salaryStandardId: item.salaryStandardId,
                    salaryStandardName: item.salaryStandardName,
                    salarySum: item.salarySum,
                    secondKindId: item.secondKindId,
                    secondKindName: item.secondKindName,
                    thirdKindId: item.thirdKindId,
                    thirdKindName: item.thirdKindName,
                    trainingAmount: item.trainingAmount,
                    status:true
                }));
                const num1 = tableData.value.map(item => ({
                    hufId: item.hufId,
                    demandSalaraySum: item.salarySum,
                    paidSalarySum: item.salarySum,
                    attachmentName: item.attachmentName,
                    bonusAmount: item.bonusAmount,
                    changeTime: item.changeTime,
                    changer: item.changer,
                    checkStatus: item.checkStatus,
                    checkTime: item.checkTime,
                    checker: item.checker, // 修正此处逗号为冒号
                    deleteTime: item.deleteTime,
                    fileChangAmount: item.fileChangAmount,
                    firstKindId: item.firstKindId,
                    firstKindName: item.firstKindName,
                    humanAccount: item.humanAccount,
                    humanAddress: item.humanAddress,
                    humanAge: item.humanAge,
                    humanBank: item.humanBank,
                    humanBirthday: item.humanBirthday,
                    humanBirthplace: item.humanBirthplace,
                    humanEducatedDegree: item.humanEducatedDegree,
                    humanEducatedMajor: item.humanEducatedMajor,
                    humanEducatedYears: item.humanEducatedYears,
                    humanEmail: item.humanEmail,
                    humanFamilyMembership: item.humanFamilyMembership,
                    humanFileStatus: item.humanFileStatus,
                    humanHistroyRecords: item.humanHistroyRecords,
                    humanHobby: item.humanHobby,
                    humanId: item.humanId,
                    humanIdCard: item.humanIdCard,
                    humanMajorId: item.humanMajorId,
                    humanMajorKindId: item.humanMajorKindId,
                    humanMajorKindName: item.humanMajorKindName,
                    humanMajorName: item.humanMajorName,
                    humanMobilephone: item.humanMobilephone,
                    humanName: item.humanName,
                    humanNationality: item.humanNationality,
                    humanParty: item.humanParty,
                    humanPicture: item.humanPicture,
                    humanPostcode: item.humanPostcode,
                    humanProDesignation: item.humanProDesignation,
                    humanQQ: item.humanQQ,
                    humanRace: item.humanRace,
                    humanReligion: item.humanReligion,
                    humanSex: item.humanSex,
                    humanSocietySecurityId: item.humanSocietySecurityId,
                    humanSpeciality: item.humanSpeciality,
                    humanTelephone: item.humanTelephone,
                    lastlyChangeTime: item.lastlyChangeTime,
                    majorChangeAmount: item.majorChangeAmount,
                    recoveryTime: item.recoveryTime,
                    registTime: item.registTime,
                    register: item.register,
                    remark: item.remark,
                    salaryStandardId: item.salaryStandardId,
                    salaryStandardName: item.salaryStandardName,
                    salarySum: item.salarySum,
                    secondKindId: item.secondKindId,
                    secondKindName: item.secondKindName,
                    thirdKindId: item.thirdKindId,
                    thirdKindName: item.thirdKindName,
                    trainingAmount: item.trainingAmount,
                    status:false
                }));
                console.info(num)
                console.info(num1)
                axios.post("/SG/SGAddAsync",{
                    salaryGrantId:randomNumber.value,
                    salaryStandardId:salaryStandardId.value,
                    firstKindId:firstKindId.value,
                    firstKindName:firstKindName.value,
                    secondKindId:secondKindId.value,
                    secondKindName:secondKindName.value,
                    thirdKindId:thirdKindId.value,
                    thirdKindName:thirdKindName.value,
                    humanAmount:count.value,
                    salaryStandardSum:salaryStandardSum.value,
                    salaryPaidSum:pSalary.value,
                    register:tName.value,
                    registTime:tTime.value,
                    checkStatus:"等待复核"
                },{
                    headers: {
                        "Content-type": "application/x-www-form-urlencoded",
                        //或其他格式
                    },
                }).then(res =>{
                    if (res.data > 0){
                        axios.post("/SG/SGDAddAsync",{
                            sGDAddDtos:infolist
                        },{
                            headers: {
                                "Content-type": "application/x-www-form-urlencoded",
                                //或其他格式
                            },
                        }).then(res =>{
                            if (res.data > 0){
                                axios.put("/SG/SGUpdateSalarySumAsync",{
                                    hFs:num
                                },{
                                    headers: {
                                        "Content-type": "application/x-www-form-urlencoded",
                                        //或其他格式
                                    },
                                }).then(res =>{
                                    if  (res.data > 0){
                                        ElMessage({
                                        type: 'success',
                                        message: "登记成功！"});
                                        axios.put("/SG/SendMail",{
                                            hFs:num1
                                        },{
                                            headers: {
                                                "Content-type": "application/x-www-form-urlencoded",
                                                //或其他格式
                                            },
                                        }).then(res=>{
                                            
                                        }).catch(error=>{
                                            console.info(error)
                                        })
                                        setInterval(()=>{
                                            close()
                                        },1000)
                                    }
                                }).catch(error =>{
                                    console.info(error)
                                })
                            }
                        }).catch(Error =>{
                            console.info(Error)
                        })
                    }
                }).catch(Error =>{
                    console.info(Error)
                })
            }

            return {
                tableData,
                indexMethod,
                tName,
                startUpdatingTime,
                tTime,
                salary,
                pSalary,
                count,
                handleInput,dialogVisible,info,ssd,reset,close,randomNumber,edit,salaryStandardId,firstKindId,
                firstKindName,secondKindId,secondKindName,thirdKindId,thirdKindName,salaryStandardSum,dialogVisible1,close1
            };
        }
    });
    app.use(ElementPlus);
    app.mount("#app");
</script>